<template>
  <div class="contentRight2">

    <!--访客单位人次统计-->
    <div id="tools">

      <div class="height8"></div>
      <!-- 查询条件 -->
      <a-form layout="inline" style="text-align: left;padding: 0 10px;font-size: 0;" :selfUpdate="true">

        <a-form-item label="查询方式" class="marginBtm">
          <a-dropdown class="min-width-110">
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item :key="item.id" v-for="item in approvalStatus">{{item.name}}</a-menu-item>
            </a-menu>
            <a-button>
              <div class="query-conditions">
                {{ statusValue }}
                <a-icon type="down"/>
              </div>
            </a-button>
          </a-dropdown>
        </a-form-item>

        <a-form-item label="选择月份" class="marginBtm" v-if="statusId == 1" :hasFeedback="monthFeedback" :validateStatus="validateStatus">
        <a-config-provider :locale="localezh_CN">
        <!--<a-range-picker @change="onChangePicker" :locale="localezh_CN" :default-value="[startDate, endDate]"/>-->
          <a-month-picker :size="'default'" placeholder="请选择月份" style="width: 150px;" :value="nowMonthDate"  @change="onChangeDate"/>
        </a-config-provider>
        </a-form-item>
        <div style="display: inline-block;" v-if="statusId == 2">
          <a-form-item label="选择年份" class="marginBtm" :hasFeedback="yearFeedback" :validateStatus="validateStatus2">
            <a-config-provider :locale="localezh_CN">
              <!--<a-range-picker @change="onChangePicker" :locale="localezh_CN" :default-value="[startDate, endDate]"/>-->
              <a-date-picker mode="year" placeholder="请选择年份"  style="width: 150px;" :value="yearTime" :open="isopen"  format="YYYY"
                             @openChange=handleOpenChange
                             @panelChange=handlePanelChange
                             @change=clearValue />
            </a-config-provider>
          </a-form-item>
        <a-form-item label="选择季度" class="marginBtm">
          <a-dropdown style="">
            <a-menu slot="overlay" @click="quarterlyMenuClick">
              <a-menu-item :key="item.id" v-for="item in quarterlyStatus">{{item.name}}</a-menu-item>
            </a-menu>
            <a-button>{{ quarterlyValue }}
              <a-icon type="down"/>
            </a-button>
          </a-dropdown>
        </a-form-item>
        </div>
        <a-form-item label="选择年份" class="marginBtm" v-if="statusId == 3" :hasFeedback="yearFeedback" :validateStatus="validateStatus2">
          <a-config-provider :locale="localezh_CN">
            <!--<a-range-picker @change="onChangePicker" :locale="localezh_CN" :default-value="[startDate, endDate]"/>-->
            <a-date-picker mode="year" placeholder="请选择年份"  style="width: 150px;" :value="yearTime" :open="isopen"  format="YYYY"
                           @openChange=handleOpenChange
                           @panelChange=handlePanelChange
                           @change=clearValue />
          </a-config-provider>
        </a-form-item>

        <a-form-item label="基地" class="marginBtm">
          <a-dropdown class="min-width-110">
            <a-menu slot="overlay" @click="baseMenuClick">
              <a-menu-item :key="item.id" v-for="item in baceType">{{item.name}}</a-menu-item>
            </a-menu>
            <a-button>
              <div class="query-conditions">
                {{ visitBaseName }}
                <a-icon type="down"/>
              </div>
            </a-button>
          </a-dropdown>
        </a-form-item>

        <!--<a-form-item label="被访者部门" class="marginBtm">-->
          <!--<a-select-->
            <!--show-search-->
            <!--:loading="selectDataLoading"-->
            <!--placeholder="请选择部门"-->
            <!--option-filter-prop="children"-->
            <!--style="width: 200px"-->
            <!--:filter-option="filterOption"-->
            <!--@change="handleChangeSelect"-->
            <!--@search="handleSearch"-->
            <!--@popupScroll="handlePopupScroll"-->
            <!--@select="handleSelectDept"-->
            <!--@blur="blurDept"-->
          <!--&gt;-->
            <!--<a-select-option :key="item.id" v-for="item in renderedOptions" :value="item.id">-->
              <!--{{item.name}}-->
            <!--</a-select-option>-->
          <!--</a-select>-->

          <!--<a-dropdown style="">-->
          <!--<a-menu slot="overlay" @click="areaMenuClick">-->
          <!--<a-menu-item :key="item.id" v-for="item in oriDataList">{{item.name}}</a-menu-item>-->
          <!--</a-menu>-->
          <!--<a-button>{{ name }}-->
          <!--<a-icon type="down"/>-->
          <!--</a-button>-->
          <!--</a-dropdown>-->

        </a-form-item>
          <!--<a-form-item label="访客单位" class="marginBtm">-->
            <!--<a-select-->
              <!--show-search-->
              <!--placeholder="请选择访客单位"-->
              <!--option-filter-prop="children"-->
              <!--style="width: 200px"-->
              <!--@select="handleSelectVisitCom"-->
              <!--@blur="blurVisitCom"-->
              <!--@search="handleSearchVisitCom"-->
              <!--@popupScroll="handlePopupScrollVisit"-->
            <!--&gt;-->
              <!--<a-select-option :key="item.name" v-for="item in visitComFilterList" :value="item.name">-->
                <!--{{item.name}}-->
              <!--</a-select-option>-->
            <!--</a-select>-->
        <!--</a-form-item>-->

        <a-form-item label="Top" class="marginBtm">
          <a-dropdown style="">
            <a-menu slot="overlay" @click="topMenuClick">
              <a-menu-item :key="item.id" v-for="item in topStatus">{{item.name}}</a-menu-item>
            </a-menu>
            <a-button>{{ topValue }}
              <a-icon type="down"/>
            </a-button>
          </a-dropdown>
        </a-form-item>

        <!--<a-form-item label="关键字" class="marginBtm">-->
          <!--<a-input v-model="queryValue" allowClear placeholder="请输入访客单位名称" class="marginBtm"-->
                   <!--@pressEnter="inquireStart"/>-->
        <!--</a-form-item>-->

        <a-form-item class="marginBtm">
          <a-button type="primary" @click="inquireStart">
            查询
          </a-button>
        </a-form-item>

      </a-form>
      <a-divider style="margin: 5px 0"/>

    </div>

    <div :style="{height:yHeight,position: 'relative',overflowY:'auto',overflowX:'hidden'}">
      <!--<div class="zhezhaoAllBase" v-if="loadingAll" style="z-index: 100;top: 0">-->
        <!--<a-spin tip="加载中...">-->
        <!--</a-spin>-->
      <!--</div>-->
      <div style="height: 500px;position:relative;">
          <!--自定义加载中-->
          <p style="margin-left: 20px;font-weight: bold;font-size: 16px;margin-top: 10px;">依公司到访次数排名:</p>
          <div class="zhezhaoAllBase" v-if="loadingDataAll1" style="z-index: 20;top: 30px">
            <a-spin tip="加载中...">
            </a-spin>
          </div>
          <div class="zhezhaoAllBase" style="top:30px" v-if="errorMessageAll != ''">
            <p>{{errorMessageAll}}</p>
          </div>
          <div class="zhezhaoAllBase" style="top:30px" v-else-if="dataAll1.length == 0">
            <p>未查询到匹配数据</p>
          </div>
          <!--柱状图-->
          <div style="padding: 30px 40px 0 40px">
            <div id="containerAll1" class="chartzhu4"></div>
          </div>
      </div>
      <div style="background-color: #f0f2f5;height: 10px;"></div>
      <div style="height: 500px;position:relative;">
        <p style="margin-left: 20px;font-weight: bold;font-size: 16px;margin-top: 15px;">依到访人次排名:</p>
        <div class="zhezhaoAllBase" v-if="loadingDataAll2" style="z-index: 20;top: 30px">
          <a-spin tip="加载中...">
          </a-spin>
        </div>
        <div class="zhezhaoAllBase" style="top:30px" v-if="errorMessageAll2 != ''">
          <p>{{errorMessageAll2}}</p>
        </div>
        <div class="zhezhaoAllBase" style="top:30px" v-else-if="dataAll2.length == 0">
          <p>未查询到匹配数据</p>
        </div>
        <!--柱状图-->
        <div style="padding: 30px 40px 0 40px">
          <div id="containerAll2" class="chartzhu4"></div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  import {tableBoxHeight} from "@/api/communal";
  import reservationApi from "@/api/reservation";
  import localezh_CN from 'antd/lib/locale-provider/zh_CN';
  import dateUtil from "@/utils/dateUtils";
  import moment from "moment";
  import {ConfigProvider} from 'ant-design-vue';//引用
  import 'moment/locale/zh-cn';
  import cfg from '@/config/config'
  import { registerTheme,Chart } from '@antv/g2';
  registerTheme('newTheme', {minColumnWidth:10,maxColumnWidth:10});


  const LOAD_NUM = 20; // 加载条数

  export default {
    components: {
      ConfigProvider
    },
    name: '',
    data() {
      return {
        localezh_CN,
        spinning: false,

        delayTime: 500,
        yHeight: "",
        yHeight3: 400,
        loadingAll: false,  //加载中
        nowMonthDate: moment(new Date(), 'YYYY-MM'),
        yearTime: moment(moment().year(), 'YYYY'),
        isopen: false,
        yearFeedback: false,  //警示图标是否展示图标
        validateStatus2: '',//图标类型
        dateFormat: 'YYYY/MM/DD',
        startDate: "",
        endDate: "",
        startDated: "",
        endDated: "",
        queryValue: "全部",  //选择赋值
        queryValue2: "",  //查询时才有值
        columns: [],   //表格表头
        // 查询方式下拉菜单
        statusValue: "按月",  //状态名称
        statusId: 1,   //状态id
        approvalStatus: [
          {name: "按月", id: 1},
          {name: "按季度", id: 2},
          {name: "按年", id: 3},
        ],
        monthFeedback: false,  //警示图标是否展示图标
        validateStatus: '',//图标类型
        // 选择季度下拉菜单
        quarterlyValue: "第一季度",  //状态名称
        quarterlyId: 1,   //状态id
        quarterlyStatus: [
          {name: "第一季度", id: 1},
          {name: "第二季度", id: 2},
          {name: "第三季度", id: 3},
          {name: "第四季度", id: 4},
        ],
        // top下拉菜单
        topValue: "30",  //状态名称
        topId: 2,   //topid
        topStatus: [
          {name: "20", id: 1},
          {name: "30", id: 2},
        ],
        //基地列表
        baceType: [
          {name: "全部", id: 99},
        ],
        visitBaseName:"全部",   //基地名称
        visitBaseId: 99,   //99查全部，或者基地id
        //被访者部门列表
        oriDataList: [
          {name: "全部", id: 99},
        ],
        name:"全部",    //区域名称
        visitAreaId: 99,   //99查全部，或者部门id
        selectDataLoading: false,

        searchVal: '', // 搜索的内容
        treePageSize: 20,
        scrollPage: 1,
        filterDataList: [], // 过滤的数据列表 -- 从dataList中过滤出含搜索内容的数据
        renderedOptions: [], // 已渲染的下拉列表

        treePageSizeVisit: 20,
        scrollPageVisit: 1,
        visitCompanyList: [], // 访客单位总数据
        visitComFilterList: [], // 访客单位总数据
        visitFilterDataList: [], // 过滤的数据列表

        // 柱状图
        loadingDataAll1: true,
        dataAll1 : [],   // 柱状图数据
        chartAll: null,  //总数据图形对象
        errorMessageAll:"",//错误信息

        // 柱状图
        loadingDataAll2: true,
        dataAll2 : [],   // 柱状图数据
        chartAll2: null,  //总数据图形对象
        errorMessageAll2: "",//错误信息

        timeNum: 1,

      }
    },
    beforeMount() {
      // this.dataAll1 = [
      //   {
      //     name: '上海步达110',
      //     value: 100,
      //   },
      //   {
      //     name: '上海步达19',
      //     value: 90,
      //   },
      // ];
      // this.startDate = moment(dateUtil.getFirstDay(), this.dateFormat);
      // this.endDate = moment(dateUtil.getLastDay(), this.dateFormat);
      // this.startDated = moment(this.startDate).format('YYYY-MM-DD');
      // this.endDated = moment(this.endDate).format('YYYY-MM-DD');

      // for (let i = 0; i < 20 ; i++) {
      //   this.oriDataList.push({
      //     name: "name" + i,
      //     id: i
      //   })
      // }
    },
    mounted() {
      let _this = this;
      // console.log(tableBoxHeight());
      this.yHeight = tableBoxHeight() + 93 + "px";
      // this.yHeight3 = tableBoxHeight() + 43;
      this.statusValue = this.approvalStatus[0].name;
      this.statusId = this.approvalStatus[0].id;

      // 获取基地
      this.findRegionList();
      // this.getDtdepLists();
      // this.getVisitCompanyList();
      this.fristLoadData();

    },
    destroyed(){
      // 在页面销毁后
    },
    methods: {
      // 计算表格宽度
      getTableWidth() {
        let totals = null;
        var el;
        for (el of this.columns) {
          totals += parseInt(el.width);
        }
        return totals + 100 + "px"
      },
      // 选择日期
      onChangePicker(date, dateString) {
        // console.log(date, dateString);
        this.startDated = dateString[0];
        this.endDated = dateString[1];
      },
      onChangeDate(date, dateString) {
        // console.log(date, dateString);
        this.nowMonthDate = date;
        if (this.nowMonthDate == null){
          this.monthFeedback = true;
          this.validateStatus = 'error';
        } else {
          this.monthFeedback = false;
          this.validateStatus = '';
        }
      },

      handlePanelChange (value){
        this.yearTime = value;
        this.yearFeedback = false;
        this.validateStatus2 = '';
        this.isopen = false;
      },
      handleOpenChange (status)  {
        if(status){
          this.isopen = true;
        } else {
          this.isopen = false;
        }
      },
      clearValue () {
        this.yearTime = null;
        this.yearFeedback = true;
        this.validateStatus2 = 'error';
      },
      // 第一次加载数据
      async fristLoadData(){
        // 第一次默认按月查询
        let param = {
          statusId: this.statusId,
          month: moment(this.nowMonthDate).format('YYYY-MM'),    //月份
          visitBaseId: this.visitBaseId,   //基地id
          topValue: this.topValue,   //top数
          deptId: this.visitAreaId,    //部门id
          searchText: this.queryValue
        }
        // console.log(param);
        await this.getAllVisitCases(param);
        await this.getAllVisitTwelveCases(param);
        this.pieChartAll1();
        this.piechartAll2();
      },

      // 开始查询
      async inquireStart() {
        this.timeNum = 2;
        if (this.statusId == 1){
          if (this.nowMonthDate == null){
            this.$message.error("请选择月份");
            return
          }
          let param = {
              statusId: this.statusId,   //按什么查询
              month: moment(this.nowMonthDate).format('YYYY-MM'),    //月份
              visitBaseId: this.visitBaseId,   //基地id
              topValue: this.topValue,   //top数
              deptId: this.visitAreaId,    //部门id
              searchText: this.queryValue
            }
            this.getAllVisitCases(param);
           this.getAllVisitTwelveCases(param);
        } else if (this.statusId == 2){
          if (this.yearTime == null){
            this.$message.error("请选择年份");
            return
          }
          let param2 = {
            year: moment(this.yearTime).format('YYYY'),
            statusId: this.statusId,
            quarterlyId: this.quarterlyId,    //季度id
            visitBaseId: this.visitBaseId,   //基地id
            topValue: this.topValue,   //top数
            deptId: this.visitAreaId,    //部门id
            searchText: this.queryValue
          }
            this.getAllVisitCases(param2);
           this.getAllVisitTwelveCases(param2);
        } else if (this.statusId == 3){
          if (this.yearTime == null){
            this.$message.error("请选择年份");
            return
          }
          let param3 = {
            statusId: this.statusId,
            year: moment(this.yearTime).format('YYYY'),    //年份
            visitBaseId: this.visitBaseId,   //基地id
            topValue: this.topValue,   //top数
            deptId: this.visitAreaId,    //部门id
            searchText: this.queryValue
          }
            this.getAllVisitCases(param3);
            this.getAllVisitTwelveCases(param3);
        }
        this.$nextTick(()=>{
          // console.log("更新柱状图")


        })
      },
      // 查询方式下拉菜单
      handleMenuClick(e) {
        // console.log(e);
        this.approvalStatus.filter(el => {
          if (el.id == e.key) {
            this.statusValue = el.name;
            this.statusId = el.id
          }
        });
      },

      // top下拉菜单
      topMenuClick(e) {
        // console.log(e);
        this.topStatus.filter(el => {
          if (el.id == e.key) {
            this.topValue = el.name;
            this.topId = el.id
          }
        });
      },
      // 季度选择下拉菜单
      quarterlyMenuClick(e) {
        // console.log(e);
        this.quarterlyStatus.filter(el => {
          if (el.id == e.key) {
            this.quarterlyValue = el.name;
            this.quarterlyId = el.id
          }
        });
      },
      // 切换基地
      baseMenuClick(e) {
        // console.log(e);
        this.baceType.filter(el => {
          if (el.id == e.key) {
            // console.log(el);
            this.visitBaseName = el.name;
            this.visitBaseId = el.id;
            if (el.id == 99){
              this.areaName = "全部";
              this.visitAreaId = 99
            } else {
              this.getDtdepLists();
            }
          }
        });

      },
      // 切换被访者部门
      areaMenuClick(e) {
        // console.log(e);
        this.oriDataList.filter(el => {
          if (el.id == e.key) {
            // console.log(el);
            this.name = el.name;
            this.visitAreaId = el.id
          }
        });

      },

      // 获取基地信息
      async findRegionList() {
        let resp = await reservationApi.getBdSysItemList({typeId: 200});
        // console.log(resp);
        if (resp.data.success){
          this.baceType = [...this.baceType,...resp.data.result];
          // console.log(this.baceType)
        } else {
          this.$message.error(resp.data.message);
        }
      },
      // 获取部门
      async getDtdepLists(){
        this.selectDataLoading = true;
        let res = await reservationApi.getDtdepList()
        // console.log(res.data);
        this.selectDataLoading = false;
        if (res.data.success){
          this.oriDataList = [{name: "全部", id: 99}];
          this.oriDataList = [...this.oriDataList,...res.data.result];
          this.renderedOptions = this.oriDataList.slice(0, LOAD_NUM)
          // console.log(this.oriDataList);
          // console.log(this.renderedOptions);
        } else {
          this.$message.error(res.data.message);
        }

      },

      // 获取所有访客单位
      async getVisitCompanyList(){
        this.selectDataLoading = true;
        let res = await reservationApi.getVisitCompanyList()
        // console.log(res.data);
        if (res.data.success){
          this.visitCompanyList = [{name: "全部", value: 99}];
          this.visitCompanyList = [...this.visitCompanyList,...res.data.result];
          this.visitComFilterList = this.visitCompanyList.slice(0, LOAD_NUM)
          // console.log(this.visitComFilterList);
        } else {
          this.$message.error(res.data.message);
        }

      },

      // 获取数据
      async getAllVisitCases(params) {
        this.loadingDataAll1 = true;
        this.loadingDataAll2 = true;
        let resp = await reservationApi.getVisitorUnitManTimeList(params);
        // console.log(resp.data);
        if (resp.data && resp.data.success) {
          this.dataAll1 = resp.data.result;
          // this.loadingAll = false;
          this.loadingDataAll1 = false;
          this.errorMessageAll = '';
          if(this.timeNum == 2){
            this.pieChartChangeData();
          }
        } else {
          this.loadingAll = false;
          this.loadingDataAll1 = false;
          this.loadingDataAll2 = false;
          this.errorMessageAll = resp.data.message;
        }
      },
      // 获取数据
      async getAllVisitTwelveCases(params) {
        this.loadingDataAll2 = true;
        let resp = await reservationApi.getVisitorUnitList(params);
        // console.log(resp.data);
        if (resp.data && resp.data.success) {
          this.dataAll2 = resp.data.result;
          // this.loadingAll = false;
          this.loadingDataAll2 = false;
          this.errorMessageAll2 = '';
          if(this.timeNum == 2){
            this.pieChartChangeTwelveData();
          }
        } else {
          this.loadingAll = false;
          this.loadingDataAll2 = false;
          this.errorMessageAll2 = resp.data.message;
        }
      },


      // 全部基地访客数据柱状图
      pieChartAll1() {
        const chart = new Chart({
          container: 'containerAll1',
          autoFit: true,
          height: this.yHeight3,
          padding: [20, 30, 60, 30],
        });
        this.chartAll = chart;
        chart.data(this.dataAll1);
        chart.scale('value', {
          nice: true,
        });
        chart.axis('name', {
          tickLine: null,
        });

        chart.axis('value', {
          label: {
            formatter: (val) => {
              return " " + " " + " " + val
            },
          },
        });

        chart.tooltip({
          showMarkers: false,
        });
        chart.interaction('element-active');
        chart.theme('newTheme');
        chart.legend(false);
        chart
          .interval()
          .position('name*value')
          .color('name', (val) => {
            return '#009900';
          })
          .label('value', {
            offset: 10,
          });
        chart.render();
      },
      // 全部基地访客数据柱状图
      pieChartChangeData() {
        this.chartAll.clear(); // 清理所有图形
        this.chartAll.data(this.dataAll1);
        this.chartAll.scale('value', {
          nice: true,
        });
        this.chartAll.axis('name', {
          tickLine: null,
        });

        this.chartAll.axis('value', {
          label: {
            formatter: (val) => {
              return " " + " " + " " + val
            },
          },
        });

        this.chartAll.tooltip({
          showMarkers: false,
        });
        this.chartAll.interaction('element-active');

        this.chartAll.legend(false);
        this.chartAll
          .interval()
          .position('name*value')
          .color('name', (val) => {
            return '#009900';
          })
          .label('value', {
            offset: 10,
          });
        this.chartAll.render();
      },

      // 全部基地访客数据柱状图
      piechartAll2() {
        const chart = new Chart({
          container: 'containerAll2',
          autoFit: true,
          height: this.yHeight3,
          padding: [20, 30, 60, 30],
        });
        this.chartAll2 = chart;
        chart.data(this.dataAll2);
        chart.scale('value', {
          nice: true,
        });
        chart.axis('name', {
          tickLine: null,
        });

        chart.axis('value', {
          label: {
            formatter: (val) => {
              return " " + " " + " " + val
            },
          },
        });

        chart.tooltip({
          showMarkers: false,
        });
        chart.interaction('element-active');
        chart.theme('newTheme')
        chart.legend(false);
        chart
          .interval()
          .position('name*value')
          .color('name', (val) => {
            return '#009900';
          })
          .label('value', {
            offset: 10,
          });
        chart.render();
      },
      // 全部基地访客数据柱状图
      pieChartChangeTwelveData() {
        this.chartAll2.clear(); // 清理所有图形
        this.chartAll2.data(this.dataAll2);
        this.chartAll2.scale('value', {
          nice: true,
        });
        this.chartAll2.axis('name', {
          tickLine: null,
        });

        this.chartAll2.axis('value', {
          label: {
            formatter: (val) => {
              return " " + " " + " " + val
            },
          },
        });

        this.chartAll2.tooltip({
          showMarkers: false,
        });
        this.chartAll2.interaction('element-active');

        this.chartAll2.legend(false);
        this.chartAll2
          .interval()
          .position('name*value')
          .color('name', (val) => {
            return '#009900';
          })
          .label('value', {
            offset: 10,
          });
        this.chartAll2.render();
      },

      // 选择部门时
      handleChangeSelect(value) {
        // console.log(`部门名称是： ${value}`);
        this.visitAreaId = value;
      },
      // 选择部门过滤器
      filterOption(input, option) {
        // console.log(input,option);
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      // 选择部门太多卡顿解决
      handleSearch (val) {
        this.searchVal = val
        if (!val) {
          this.renderedOptions =  this.oriDataList.slice(0, LOAD_NUM)
        } else {
          this.renderedOptions = []
          this.scrollPage = 1
          this.oriDataList.forEach(item => {
            if (item.name.indexOf(val) >= 0) {
              this.renderedOptions.push(item)
            }
          })
          this.filterDataList = this.renderedOptions
          this.renderedOptions = this.renderedOptions.slice(0, 20)
        }
      },
      //下拉框下滑事件
      handlePopupScroll (e) {
        const {target} = e;
        const scrollHeight = target.scrollHeight - target.scrollTop;
        const clientHeight = target.clientHeight;

        // 下拉框不下拉的时候
        if (scrollHeight === 0 && clientHeight === 0) {
          this.scrollPage = 1;
          // console.log(this.scrollPage);
        } else {
          // 当下拉框滚动条到达底部的时候
          if (scrollHeight < clientHeight + 5) {
            this.scrollPage = this.scrollPage + 1;
            const scrollPage = this.scrollPage;// 获取当前页
            const treePageSize = this.treePageSize * (scrollPage || 1);// 新增数据量
            const newData = []; // 存储新增数据
            let max = ''; // max 为能展示的数据的最大条数
            if (this.oriDataList.length > treePageSize) {
              // 如果总数据的条数大于需要展示的数据
              max = treePageSize;
            } else {
              // 否则
              max = this.oriDataList.length;
            }
            // 判断是否有搜索
            if (this.searchVal) {
              this.filterDataList.forEach((item, index) => {
                if (index < max) { // 当data数组的下标小于max时
                  newData.push(item);
                }
              })
            } else {
              this.oriDataList.forEach((item, index) => {
                if (index < max) { // 当data数组的下标小于max时
                  newData.push(item)
                }
              })
            }

            this.renderedOptions = newData; // 将新增的数据赋值到要显示的数组中
          }
        }
      },
      // 被选中时调用，参数为选中项的 value (或 key) 值
      handleSelectDept (val) {
        // console.log(val);
        if (this.searchVal) {
          const selectedArr = (this.oriDataList).filter(item => item === val); // 从数据源中过滤出下拉框选中的值，并返回一个数组
          const restList = (this.oriDataList).filter(item => item !== val); // 从数据源中过滤出其他的值，返回一个数组
          const newList = selectedArr.concat(restList).slice(0, LOAD_NUM); // 将选中的元素放到下拉列表的第一位
          this.renderedOptions = newList // 更新已渲染的下拉列表
          this.oriDataList = selectedArr.concat(restList) // 更新数据源
          this.searchVal = '' // 因为触发handleSelect函数时，会自动清空用户输入的内容。因此，searchVal需要重置。
        }
      },
      // 失去焦点时重置默认的数据
      blurDept(){
        this.renderedOptions = this.oriDataList.slice(0, LOAD_NUM)
      },


      // 选择访客单位
      handleSelectVisitCom(val){
        this.queryValue = val
      },
      blurVisitCom(){
        this.visitComFilterList = this.visitCompanyList.slice(0, LOAD_NUM)
      },
      handleSearchVisitCom(val) {
        this.queryValue2 = val
        if (!val) {
          this.visitComFilterList =  this.visitCompanyList.slice(0, LOAD_NUM)
        } else {
          this.visitComFilterList = [];
          this.scrollPageVisit = 1;
          this.visitCompanyList.forEach(item => {
            if (item.name.indexOf(val) >= 0) {
              this.visitComFilterList.push(item)
            }
          })
          this.visitFilterDataList = this.visitComFilterList;
          this.visitComFilterList = this.visitComFilterList.slice(0, 20);
        }
      },
      //访客单位下拉框下滑事件
      handlePopupScrollVisit (e) {
        const {target} = e;
        const scrollHeight = target.scrollHeight - target.scrollTop;
        const clientHeight = target.clientHeight;

        // 下拉框不下拉的时候
        if (scrollHeight === 0 && clientHeight === 0) {
          this.scrollPageVisit = 1;
          // console.log(this.scrollPageVisit);
        } else {
          // 当下拉框滚动条到达底部的时候
          if (scrollHeight < clientHeight + 5) {
            this.scrollPageVisit = this.scrollPageVisit + 1;
            const scrollPageVisit = this.scrollPageVisit;// 获取当前页
            const treePageSizeVisit = this.treePageSizeVisit * (scrollPageVisit || 1);// 新增数据量
            const newData = []; // 存储新增数据
            let max = ''; // max 为能展示的数据的最大条数
            if (this.visitCompanyList.length > treePageSizeVisit) {
              // 如果总数据的条数大于需要展示的数据
              max = treePageSizeVisit;
            } else {
              // 否则
              max = this.visitCompanyList.length;
            }
            // 判断是否有搜索
            if (this.queryValue2) {
              // console.log(this.visitFilterDataList);
              this.visitFilterDataList.forEach((item, index) => {
                if (index < max) { // 当data数组的下标小于max时
                  newData.push(item);
                }
              })
            } else {
              // console.log(this.visitCompanyList);
              this.visitCompanyList.forEach((item, index) => {
                if (index < max) { // 当data数组的下标小于max时
                  newData.push(item)
                }
              })
            }
            // console.log(newData);
            this.visitComFilterList = newData; // 将新增的数据赋值到要显示的数组中
          }
        }
      },


    },
  }
</script>

<style scoped>

</style>

